<template>
    <div>
        <Row>
            <Col :md="12" :lg="24" :style="{marginBottom: '10px'}">
            <Card>
                <p slot="title" class="card-title">
                    <Icon type="android-checkbox-outline"></Icon>
                    筛选查询
                </p>
                用户账号：<Input style="width: 150px"  placeholder="用户ID/账号"></Input>
                用户昵称：<Input style="width: 150px"  placeholder="用户昵称"></Input>
                注册时间：<Input style="width: 150px"  placeholder="请选择时间" icon="ios-clock-outline"></Input>
                <Button type="primary">查询结果</Button>
            </Card>
            </Col>
        </Row>

        <div style="margin-top:10px;">

    	<table-temp   :columnsList="columnsList" v-model="UserList" >
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :total="total" :page-size='pagesize' :current="page" show-elevator show-total @on-change="changePage"></Page>
                </div>
            </div>
    	</table-temp>
        </div>

    </div>
</template>


<script>
    import TableTemp from "../common/layout/table-temp.vue"
    import listDetail from './users-detail.vue';
    
    export default {
        components: {
            TableTemp,
            listDetail,
        },
        data () {
            return {
                UserList: [],
                columnsList: [
                    {
                        title: 'id',
                        key: 'id',
                        align: 'center'
                        
                    },
                     {
                        title: '加入时间',
                        key: 'ctime',
                        align: 'center'

                    },
                    
                    {
                        title: '头像',
                        key: 'photo',
                        align: 'center',
                        width: 100,
                        render: (h, params) => {
                            return h('div', {
                                attrs: {
                                    style: 'width: 50px;height: 50px;'
                                },
                            }, [
                                h('img', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    attrs: {
                                        src: params.row.photo, style: 'width: 40px;height: 40px;border-radius: 2px;margin-top:5px;'
                                    },
                                    style: {
                                    },
                                }),
                            ]);
                        }
                    },


                    {
                        title: '昵称',
                        key: 'username',
                        align: 'center'
                    },
                     {
                        title: '账号',
                        key: 'open_id',
                        align: 'center'
                    },
                    {
                        title: '推荐人',
                        key: 'recommend_uid',
                        align: 'center'
                    },
                    {
                    title: '状态',
                    key: 'state',
                    align: 'center',
                    render: (h, params) => {
                    const row = params.row
                    const state = row.state === '0' ? '正常' : row.state === '1' ? '关闭' : '未知'
                    return h('Button', {
                        props: {
                            type: 'default',
                            size: 'small'
                            }
                        }, state);
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'handle',
                        handle: ['edit','delete']
                    }
                ],
                modalShow:false,
                detailShow: false,
                page: 1,
                pagesize: 30,
                total: 0,  
                propsData: {},
                
            }
        },

        created () {
            this.fetchData();
        },
        methods:{
            fetchData(){
                var _this = this;
                this.$axios.get(process.env.API_HOST+'/account/list',{ params: { page: this.page, pagesize: this.pagesize } }).then(function(response) {
                    if (response.data.code !== 0) {
                        _this.$Message.error(response.data.msg);
                        return false;
                    }else{
                        _this.UserList = response.data.data.list;
                        _this.total = parseInt(response.data.data.count);
                        
                    }
                    }).catch(function(err) {
                        console.log(err);
                    });
            },
            changePage (page) {
                this.page = page;            
                this.fetchData();
            },
        },
    }
</script>
